<script setup name="App" lang="ts">
// 需求：点击按钮切换图片的地址

import { ref } from 'vue';

const url = ref('https://pinia.vuejs.org/logo.svg')
// !如何用 ref 函数配合 ref 属性获取 DOM
const oImg = ref<HTMLImageElement | null>(null)
const handleClick = () => {
  // oImg.value.src = 'https://t7.baidu.com/it/u=4162611394,4275913936&fm=193&f=GIF'
  // 获取可以用可选链，
  // console.log(oImg.value?.src)
  // 赋值不行
  // oImg.value?.src = 'https://t7.baidu.com/it/u=4162611394,4275913936&fm=193&f=GIF'
  // !解决方式1：断言
  // ;(oImg.value as HTMLImageElement).src = 'https://t7.baidu.com/it/u=4162611394,4275913936&fm=193&f=GIF'
  // !解决方式2：类型收窄
  if (oImg.value) {
    oImg.value.src = 'https://t7.baidu.com/it/u=4162611394,4275913936&fm=193&f=GIF'
  }
}
</script>
<template>
  <div>
    <img :src="url" ref="oImg" />
    <button @click="handleClick">change</button>
  </div>
</template>
